<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语言选择器测试</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        .language-selector {
            position: relative;
            display: inline-block;
        }
        
        .language-button {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            background: #f3f4f6;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .language-button:hover {
            background: #e5e7eb;
        }
        
        .language-menu {
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 4px;
            background: white;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            min-width: 150px;
            z-index: 1000;
        }
        
        .language-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        .language-item:hover {
            background: #f3f4f6;
        }
        
        .language-item.active {
            background: #eff6ff;
            color: #2563eb;
        }
        
        .test-content {
            margin-top: 20px;
            padding: 20px;
            background: #f9fafb;
            border-radius: 8px;
        }
        
        .arrow {
            transition: transform 0.2s;
        }
        
        .arrow.rotated {
            transform: rotate(180deg);
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <h1>语言选择器测试</h1>
            
            <div style="text-align: right; margin-bottom: 20px;">
                <div class="language-selector">
                    <button 
                        class="language-button"
                        @click="showMenu = !showMenu"
                        type="button"
                    >
                        <span style="font-size: 20px;">{{ currentLanguageFlag }}</span>
                        <span>{{ currentLanguageName }}</span>
                        <span class="arrow" :class="{ rotated: showMenu }">▼</span>
                    </button>
                    
                    <div v-if="showMenu" class="language-menu">
                        <div
                            v-for="lang in languages"
                            :key="lang.code"
                            class="language-item"
                            :class="{ active: currentLanguage === lang.code }"
                            @click="selectLanguage(lang.code)"
                        >
                            <span style="font-size: 20px;">{{ lang.flag }}</span>
                            <span>{{ lang.name }}</span>
                            <span v-if="currentLanguage === lang.code" style="margin-left: auto;">✓</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="test-content">
                <h2>当前语言：{{ currentLanguageName }}</h2>
                <p>语言代码：{{ currentLanguage }}</p>
                <p>菜单状态：{{ showMenu ? '打开' : '关闭' }}</p>
                
                <div style="margin-top: 20px;">
                    <h3>测试文本：</h3>
                    <p>{{ testText }}</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        const { createApp } = Vue;
        
        createApp({
            data() {
                return {
                    showMenu: false,
                    currentLanguage: 'zh',
                    languages: [
                        { code: 'zh', name: '中文', flag: '🇨🇳' },
                        { code: 'en', name: 'English', flag: '🇺🇸' },
                        { code: 'pt', name: 'Português', flag: '🇵🇹' }
                    ],
                    testTexts: {
                        zh: '欢迎使用跨境政策咨询平台',
                        en: 'Welcome to Cross-border Policy Consultation Platform',
                        pt: 'Bem-vindo à Plataforma de Consultoria de Políticas Transfronteiriças'
                    }
                }
            },
            computed: {
                currentLanguageFlag() {
                    const lang = this.languages.find(l => l.code === this.currentLanguage);
                    return lang ? lang.flag : '🇨🇳';
                },
                currentLanguageName() {
                    const lang = this.languages.find(l => l.code === this.currentLanguage);
                    return lang ? lang.name : '中文';
                },
                testText() {
                    return this.testTexts[this.currentLanguage] || this.testTexts.zh;
                }
            },
            methods: {
                selectLanguage(langCode) {
                    console.log('选择语言:', langCode);
                    this.currentLanguage = langCode;
                    this.showMenu = false;
                }
            },
            mounted() {
                // 点击外部关闭菜单
                document.addEventListener('click', (event) => {
                    if (!event.target.closest('.language-selector')) {
                        this.showMenu = false;
                    }
                });
            }
        }).mount('#app');
    </script>
</body>
</html> 